<template>
  <div class="maskCenter">
    <!-- fullScreen -->
    <div id="box" :class="['systemDialog', { 'systemDialog-hide': !visible, 'fullScreen': fullScreen }]"
      :style="{ width: width, height: height }"
      style="position: absolute;margin:auto;top:0;left:0px;bottom:10px;right:0;">
      <div class="dialog-header">
        <span>创建(编辑)表格</span>
        <div>
          <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
            <span class="icon iconfont iconbiaoqianlan-guanbi" @click="hide"></span>
          </el-tooltip>
        </div>
      </div>
      <div class="body" id="body">
        <div class="content-left">
          <div id="xss-demo"></div>
        </div>
        <div class="content-middle" @click="fold">
          <div class="left" v-if="unfold">
            <div class="line"
              style="height:40px;width:20px;border-right:2px solid rgba(204,204,204,1);margin-left:10px;margin-bottom:30px;">
            </div>
            <div class="arrow-left"></div>
          </div>
          <div class="right" v-if="!unfold" style="margin-left:3px;">
            <div class="arrow-right"></div>
            <div class="line"
              style="height:40px;width:20px;border-left:2px solid rgba(204,204,204,1);margin-bottom:30px;"></div>
          </div>
        </div>
        <transition name="el-fade-in">
          <div class="content-right" v-if="unfold">
            <el-tabs v-model="activeName" class="tab">
              <el-tab-pane label="表格" name="table">
                <el-form class="systemForm" ref="form" :model="form" label-width="100px" size="mini"
                  v-for="(item, index) in formItems" :key="index">
                  <el-form-item :label="item.label">
                    <el-input v-model="formItems[item.name]" :type="item.type" class="systemInput" placeholder></el-input>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="属性" name="attribute">
                <div class="attribute">
                  <el-form class="systemForm" :model="cellItem" v-for="(item, index) in cellItems" :key="index"
                    label-width="80px" size="mini">
                    <div v-if="item.select">
                      <el-form-item :label="item.label">
                        <el-switch v-model="cellItem[item.name]" active-text="表头" inactive-text="数据"
                          @change="selectChange($event)"></el-switch>
                      </el-form-item>
                    </div>
                    <div v-else>
                      <el-form-item :label="item.label">
                        <el-input v-model="cellItem[item.name]" :readonly="item.readOnly ? 'readonly' : false"
                          class="systemInput" placeholder></el-input>
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div class="dialog-footer" style="display:flex;justify-content: flex-end;margin-right:20px;">
              <span class="systemButtonConfirm" @click="save">确认</span>
              <span class="systemButtonConfirm" @click="hide">取消</span>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import winmove from "@/directives/winmove";
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";

export default {
  directives: {
    winmove,
  },
  data() {
    return {
      width: "100%",
      height: "100%",
      fullScreen: false,
      unfold: true,
      proportion: 0.7,
      minRowNum: 9999999,
      minColNum: 9999999,
      map: {},
      attribute: {
        type: 1,
      },
      activeName: "table",
      typeList: [
        {
          value: 1,
          label: "表头",
        },
        {
          value: 2,
          label: "数据",
        },
      ],
      cellItems: [
        {
          label: "类型:",
          name: "type",
          readOnly: true,
          select: true,
        },
        {
          label: "文本:",
          name: "text",
        },
        {
          label: "参考点:",
          name: "reference",
        },
        {
          label: "行号:",
          name: "rowNum",
          readOnly: true,
        },
        {
          label: "列号:",
          name: "colNum",
          readOnly: true,
        },
        {
          label: "合并行数:",
          name: "mergeRi",
          readOnly: true,
        },
        {
          label: "合并列数:",
          name: "mergeCi",
          readOnly: true,
        },
        {
          label: "编码:",
          name: "code",
        },
      ],
      formItems: [
        {
          label: "表格名称:",
          name: "formName",
          enable: true,
        },
        {
          label: "表格类型:",
          name: "type",
        },
        {
          label: "多行处理策略:",
          name: "Strategy",
        },
        {
          label: "策略表达式:",
        },
        {
          label: "次序:",
        },
        {
          label: "SQL:",
          type: "textarea",
        },
      ],
      form: {
        formName: "",
        type: "",
        Strategy: "",
        rate: "",
      },
      cellItem: {
        type: true,
        text: "",
        reference: "",
        rowNum: 0,
        colNum: 0,
        code: "",
        value: "",
        mergeRi: 0,
        mergeci: 0,
      },
      data: [],
      visible: "true",
    };
  },
  mounted() {
    this.load();
    this.map = new Map();
    this.data = [
      {
        name: "表格1",
        type: "统计",
        time: "2020-05-11",
        frequency: "每天",
        creater: "jyh",
        createTime: "2018-05-24",
      },
      {
        name: "表格2",
        type: "统计",
        time: "2020-05-11",
        frequency: "每周",
        creater: "jyh",
        createTime: "2018-05-24",
      },
    ];
  },
  methods: {
    // 全屏
    handleFullScreen() {
      this.fullScreen = !this.fullScreen;
      if (this.fullScreen) {
        this.height = "100%";
        this.width = "100%";
      } else {
        this.height = "85%";
        this.width = "85%";
      }
    },
    //收缩属性
    fold() {
      this.unfold = !this.unfold;
    },
    load: function () {
      let myri, myci;
      Spreadsheet.locale("zh-cn", zhCN);
      var xs = new Spreadsheet("#xss-demo", {
        mode: "edit", // edit | read
        showToolbar: true,
        showGrid: true,
        showContextmenu: true,
        view: {
          height: () => document.documentElement.clientHeight - 166,
          width: () => document.documentElement.clientWidth - 100,
        },
      })
        .loadData([
          {
            styles: [
              {
                bgcolor: "#f4f5f8",
                textwrap: true,
                color: "#900b09",
                border: {
                  top: ["thin", "#0366d6"],
                  bottom: ["thin", "#0366d6"],
                  right: ["thin", "#0366d6"],
                  left: ["thin", "#0366d6"],
                },
              },
            ],
            merges: [],
            row: {
              len: 100,
              height: 25,
            },
            col: {
              len: 26,
              width: 100,
              indexWidth: 60,
              minWidth: 60,
            },
          },
        ])
        .change((cdata) => {
          if (cdata.rows.cells === undefined) {
            return;
          }
          if (cdata.rows[myri].cells[myci].merge) {
            this.cellItem.mergeRi = cdata.rows[myri].cells[myci].merge[0] + 1;
            this.cellItem.mergeCi = cdata.rows[myri].cells[myci].merge[1] + 1;
            this.map.set(myri + "-" + myci, this.cellItem);
          } else {
            this.cellItem.mergeRi = "";
            this.cellItem.mergeCi = "";
          }
          if (cdata.rows[myri]) {
            this.cellItem.text = cdata.rows[myri].cells[myci].text;
            if (this.cellItem.text) {
              this.map.set(myri + "-" + myci, this.cellItem);
            }
          }
        });
      xs.on("cell-selected", (cell, ri, ci) => {
        myri = ri;
        myci = ci;
        let key = ri + "-" + ci;
        if (this.map.has(key)) {
          this.cellItem = this.map.get(key);
          this.selectChange(this.cellItem.type);
        } else {
          this.cellItem = {}; //初始化
          this.selectChange(true);
          this.cellItem.rowNum = ri;
          this.cellItem.colNum = ci;
        }
        if (this.minColNum < 9999999) {
          this.cellItem.reference =
            "(" + this.minRowNum + "," + this.minColNum + ")";
        }
        this.activeName = "attribute";
      }).on("cell-edited", (text, ri, ci) => {
        if (ri < this.minRowNum) {
          this.minRowNum = ri;
        }
        if (ci < this.minColNum) {
          this.minColNum = ci;
        }
        this.cellItem.rowNum = ri;
        this.cellItem.colNum = ci;
        this.cellItem.text = text;
        this.cellItem.reference =
          "(" + this.minRowNum + "," + this.minColNum + ")";
        this.map.set(ri + "-" + ci, this.cellItem);
      });
    },
    selectChange: function (value) {
      //初始化
      this.cellItem.type = value;
      if (value === true) {
        this.cellItems = [
          {
            label: "类型:",
            name: "type",
            readOnly: true,
            select: true,
          },
          {
            label: "文本:",
            name: "text",
          },
          {
            label: "参考点:",
            name: "reference",
          },
          {
            label: "行号:",
            name: "rowNum",
            readOnly: true,
          },
          {
            label: "列号:",
            name: "colNum",
            readOnly: true,
          },
          {
            label: "合并行数:",
            name: "mergeRi",
            readOnly: true,
          },
          {
            label: "合并列数:",
            name: "mergeCi",
            readOnly: true,
          },
          {
            label: "编码:",
            name: "code",
          },
        ];
      } else if (value === false) {
        this.cellItems = [
          {
            label: "类型:",
            name: "type",
            readOnly: true,
            select: true,
          },
          {
            label: "文本:",
            name: "text",
          },
          {
            label: "参考点:",
            name: "reference",
          },
          {
            label: "行号:",
            name: "rowNum",
            readOnly: true,
          },
          {
            label: "列号:",
            name: "colNum",
            readOnly: true,
          },
          {
            label: "合并行数:",
            name: "mergeRi",
            readOnly: true,
          },
          {
            label: "合并列数:",
            name: "mergeCi",
            readOnly: true,
          },
          {
            label: "编码:",
            name: "code",
          },
          {
            label: "值:",
            name: "value",
          },
        ];
      }
      this.map.set(
        this.cellItem.rowNum + "-" + this.cellItem.colNum,
        this.cellItem
      );
    },
    addForm: function () { },
    add: function () {
      this.showView = true;
    },
    save: function () {
      console.log(this.map);
    },
    hide: function () {
      this.visible = false;
      setTimeout(() => {
        this.$emit("hideForm");
      }, 400);
    },
    show: function (index) {
      let menu = {
        id: this.data[index].id,
        name: "detail",
        label: "报表详情",
        view: "detail",
      };
      this.$emit("addTab", menu);
    },
    pageChange: function (pageIndex) {
      this.page.pageIndex = pageIndex;
      this.query();
    },
    pageSize: function (pageSize) {
      this.page.pageSize = pageSize;
      if (this.page.pageIndex === 1) {
        this.pageChange(1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px 4px 12px 4px;
  text-align: left;
}

.header .iconfont {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin: 0px 9px 0px 0;
  cursor: pointer;
}

.body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc(100% - 24px);
  height: calc(100% - 68px);
  animation: fadeInLeft 0.7s;
  /* border: 1px solid rgba(204, 204, 204, 1); */
  background: none;
  margin: 0 12px 12px 12px;
}

.content-left {
  height: 100%;
  width: calc(100% - 380px);
  background: var(--system-page-content-bgc);
  flex: 1;
}

.content-middle {
  display: flex;
  width: 10px;
  z-index: 999;
  margin: auto 0px;
}

.left {
  display: flex;
  width: 20px;
}

.right {
  display: flex;
  width: 20px;
}

/deep/.el-switch__label {
  color: var(--system-form-text-color);
}

.arrow-right {
  width: 0;
  height: 0;
  margin-top: 12px;
  border-width: 8px;
  border-color: transparent var(--input-border-color) transparent transparent;
  border-style: dashed solid dashed dashed;
}

.arrow-left {
  width: 0;
  height: 0;
  margin-top: 12px;
  border-width: 8px;
  border-color: transparent transparent transparent var(--input-border-color);
  border-style: dashed dashed dashed solid;
}

.content-right {
  width: 350px;
  background: var(--system-page-content-bgc);
  border: 1px solid var(--system-page-content-border-color);
  /* padding: 16px; */
  display: flex;
  flex-direction: column;
  z-index: 99;
  border-radius: 6px;
}

.tab {
  flex: 1;
  padding: 0 16px;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 22px;
}

.list-top-right {
  display: flex;
  justify-content: flex-end;
  margin: 0 10px 10px;
  padding: 0;
  height: 35px;
  line-height: 35px;
  background-color: transparent;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

// .fullScreen {
// 	position: fixed !important;
// 	margin: auto;
// 	top: 0;
// 	left: 0px;
// 	bottom: 10px;
// 	right: 0;
// 	height: calc(100%);
// 	width: calc(100%);
// }

.systemForm .el-form-item--mini.el-form-item {
  margin-left: 0px;
  padding-right: 13px;
}

.systemForm .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 16px;
}

>>>.systemForm .el-input--mini .el-input__inner {
  width: 200px !important;
}

>>>.systemForm .el-textarea__inner {
  width: 200px !important;
}

.attribute {
  display: flex;
  flex-direction: column;
  justify-content: left;
}

.content-right .el-tabs--border-card {
  border: none;
}

/deep/ .el-tabs__active-bar {
  width: 60px !important;
  left: -13px;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 13px;
}

/*活动颜色*/
/deep/ .el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/
/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--tab-line-color);
}

#xss-demo {
  height: calc(100%);
  border-radius: 6px;
  border: 1px solid var(--input-border-color);
  position: relative;
  overflow: hidden;
  display: flex;

  ::v-deep.x-spreadsheet {
    width: calc(100%);

    .x-spreadsheet-toolbar {
      width: 100% !important;
    }

    .x-spreadsheet-sheet {
      width: 100% !important;
      height: calc(100% - 40px) !important;

      .x-spreadsheet-table {
        height: calc(100%) !important;
      }
    }

    .x-spreadsheet-bottombar {
      display: none;
    }
  }
}

/deep/ .systemInput textarea {
  min-height: 100px !important;
}

.attributer .el-tabs {
  height: 100%;
}

.attribute .el-tabs--border-card {
  border: none;
}

.attribute>>>.el-tabs__active-bar {
  height: 3px;
  width: 60px !important;
  left: -13px;
}

/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 13px;
}

/*tabs 内容高度，超出滚动*/
/deep/.el-tabs__content {
  height: calc(100% - 80px);
}

/*tabs pane 继承高度,超出滚动*/
/deep/.el-tab-pane {
  overflow: auto;
  height: 100%;
}

/deep/.el-tabs__item {
  padding: 0 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--disable-text-color);
}

/*活动颜色*/

/deep/ .el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/

/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--tab-line-color);
}

/deep/.el-tabs__item {
  padding: 0 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--disable-text-color);
}
</style>
<style>
.ivu-form-item {
  margin-bottom: 10px !important;
}
</style>
